<template>
    <div class="content">
      <div class="title">
        <p>{{$t('message.global.versionList')}}</p>
        <div class="title-tag">
          {{$t('message.global.group')}}:<el-tag>{{group}}</el-tag> - {{$t('message.global.unit')}}: <el-tag type="warning">{{unit}}</el-tag>
        </div>
      </div>
      <div class="header">
        <div class="tools">
            <el-form :inline="true" :model="form" class="demo-form-inline">
              <el-form-item :label="$t('message.global.version') + ':'">
                <el-input v-model="form.version" :placeholder="$t('message.global.version')"></el-input>
              </el-form-item>

              <el-form-item :label="$t('message.global.profile') + ':'">
                <el-input v-model="form.profile" :placeholder="$t('message.global.profile')"></el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="loadData" icon="el-icon-search">{{$t('message.global.search')}}</el-button>
              </el-form-item>
            </el-form>
          <div>
            <el-button type="success" @click="addRepository" icon="el-icon-circle-plus-outline">{{$t("message.global.add")}}</el-button>
          </div>
        </div>
      </div>

      <div class="body">
        <div>
          <el-card class="box-card">
            <el-table
              :data="tableData"
              stripe
              style="width: 100%">



              <el-table-column type="expand" label="">
                <template slot-scope="props">
                  <el-form label-position="left" inline class="demo-table-expand">

                    <el-form-item class="hide-c" :label="$t('message.global.description')">
                      <span>{{props.row.description }}</span>
                    </el-form-item>

                    <el-form-item class="hide-c" :label="$t('message.global.requestNumber')">
                      <span>{{props.row.requestNumber }}</span>
                    </el-form-item>

                    <el-form-item class="hide-c" :label="$t('message.global.createTime')">
                      <span>{{props.row.createTime }}</span>
                    </el-form-item>

                    <el-form-item class="hide-c" :label="$t('message.global.updateTime')">
                      <span>{{props.row.updateTime }}</span>
                    </el-form-item>
                  </el-form>

                </template>
              </el-table-column>

              <el-table-column
                prop="version"
                :label="$t('message.global.version')">
              </el-table-column>
              <el-table-column
                prop="profile"
                :label="$t('message.global.profile')">
              </el-table-column>

              <el-table-column
                prop="requestNumber"
                :label="$t('message.global.requestNumber')">
              </el-table-column>


              <el-table-column :label="$t('message.global.operation')" :width="380">
                <template slot-scope="scope">
                  <!--<el-button
                    class="btn-modify" type="primary" size="mini" icon="el-icon-edit-outline">{{$t('message.global.modify')}}</el-button>-->
                  <!--<el-button
                    type="warning" size="mini" icon="el-icon-remove-outline">{{$t('message.global.disable')}}</el-button>-->
                  <el-button
                    size="mini"
                    type="danger" @click="deleteVersion(scope.row)" icon="el-icon-delete">{{$t('message.global.delete')}}</el-button>
                </template>
              </el-table-column>

              <el-table-column :label="$t('message.global.showDetail')">
                <template slot-scope="scope">
                  <el-button
                    size="mini" @click="showDetail(scope.row)">{{$t('message.global.detail')}}</el-button>
                </template>
              </el-table-column>

            </el-table>
          </el-card>
        </div>

        <div class="page-util">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="index"
            :page-sizes="[10, 15, 20, 30]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>



    </div>
</template>

<script>
    import AddUnitForm from "../component/AddUnitForm.vue";

    export default {
      components: {AddUnitForm},
      name: "config-version-list",
        data : function(){
          return {
            group : '',
            unit : '',
            form : {
              unitId : null,
              version : "",
              profile : "",
              index : 0,
              size : 0,
            },
            tableData : [],
            size : 10,
            index : 1,
            total : 0,
          }
        },
        methods : {
          loadData : function(){
            this.form.index = this.index;
            this.form.size = this.size;
            this.$get("/config/listVersion",this.form).then(data => (this.tableData = data.data,this.total=data.count));
          },
          handleSizeChange(value){
            this.size = value;
            this.index = 1;
            this.loadData();
          },
          handleCurrentChange(value){
            this.index = value;
          },
          showDetail(row){
            var version = row.version;
            var profile = row.profile;
            var versionId = row.id;
            this.$router.push('/configDetails?group=' + this.group + "&unit=" + this.unit + "&version=" + version + "&profile=" + profile + "&versionId=" + versionId);
          },
          addRepository(){
            this.$router.push("/addRepository?group=" + this.group + "&unit=" + this.unit + "&unitId=" + this.form.unitId);
          },
          deleteVersion(row){

            this.$confirm(this.$t('message.config.confirmDelete'), this.$t('message.global.prompt'), {
              confirmButtonText: this.$t('message.global.ok'),
              cancelButtonText: this.$t('message.global.cancel'),
              type: 'warning'
            }).then(() => {

              this.$get("/config/deleteVersionConfig?id=" + row.id).then(data => {
                if(data == 0){
                  //success
                  this.loadData();
                  this.$message.success(this.$t('message.config.deleteSuccess'))
                }else if(data == 1){
                  this.$message.success(this.$t('message.config.deleteVersionFail'))
                }else{
                  alert('not defiend code:' + data)
                }
              })


            }).catch(() => {
              //cancel
            });

          }
        },
        watch : {
          index : function () {
            this.loadData();
          }
        },
        mounted : function(){
          this.group = this.$route.query.group;
          this.unit = this.$route.query.unit;
          this.form.unitId = this.$route.query.unitId;
          this.loadData();
        }
    }
</script>

<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>

<style scoped>
  .title p{text-align: center;font-size: 20px;}
  .title{margin-bottom: 1rem;}
  .content{width:80%;margin:0 auto;}
  .header{margin-bottom: 2rem;}
  .tools{background-color: #f5f7fa;padding:10px 20px 10px 20px;border:1px solid #bbb1b1;border-radius:5px;display: flex;justify-content: space-between;}
  .el-form-item{margin-bottom: 0;}
  .page-util{margin:1rem;display: flex;flex-direction: row-reverse;}
  .btn-modify{background-color: #61afa8;border-color: #61afa8;color:#fff;}
  .title-tag{text-align: center;margin-top:0.5rem;}


</style>
